<template>
    <div class="info"> 
         <div class="title flex align-items space-between">
             <div class="txt">{{ statusTxt }}</div>
             <div class="btns flex align-items flex-end">
                 <div class="btna fn-ctr" v-if='info.status == 1' @click='baoguoEdit'>编辑</div>
                 <div class="btnb fn-ctr" @click='baoguoDelete'>删除</div>
             </div>
         </div>
         <div class="express">
            <div class="top flex align-items flex-start">
                <div class="spa">{{ info.express_name }}</div>
                <div class="spb">订单号:{{ info.express_sn }}</div>
            </div>
            <div class="bottom flex align-items flex-start flex-wrap ">
                <div class="item">
                    <div class="txt1">快递价格(¥)</div>
                    <div class="price">{{ info.price }}</div>
                </div>
                <div class="item">
                    <div class="txt1">物品类型</div>
                    <div class="txt2">{{ info.name }}</div>
                </div>
                <div class="item">
                    <div class="txt1">提交时间</div>
                    <div class="txt2">{{ info.add_time_content }}</div>
                </div>
                <!-- <div class="item" >
                    <div class="txt1">重量</div>
                    <div class="txt2">20Kg</div>
                </div>
                <div class="item" >
                    <div class="txt1">体积</div>
                    <div class="txt2">10*10*10</div>
                </div> -->
                <div class="item" v-if='info.weight'>
                    <div class="txt1">重量</div>
                    <div class="txt2">{{ info.weight }}Kg</div>
                </div>
                <div class="item" v-if='info.volume'>
                    <div class="txt1">体积</div>
                    <div class="txt2">{{ info.volume }}</div>
                </div>
                <div class="item" v-if='info.volume_weight'>
                    <div class="txt1">体积重</div>
                    <div class="txt2">{{ info.volume_weight }}</div>
                </div>
            </div>
         </div>
    </div>
</template>

<script>
    import { renderStatusTxt } from '@/util';
    export default {
        props:['info','idx'],
        data(){
            return {
                
            }
        },
        methods:{
            baoguoEdit(){
                this.$router.push({name:"expressadd",query:{mode:2,id:this.info.id}})
            },
            baoguoDelete(){
                this.$emit('delete');//Pobo tea with taro puree
            },
        },
        computed:{
            statusTxt(){
                return renderStatusTxt(this.info.status);
            }
        }
    }
</script>

<style lang="less" scoped>
    .info{
        width: 100%;
        background-color: #fff;
        padding-bottom: 15px;
        .title{
            padding: 14px 0;
            border-bottom: 1px solid #EEEEEE;
            .txt{
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #5652FF;
            }
            .btna{
                width: 41px;
                height: 21px;
                background: #FCAC38;
                box-shadow: 0px 2px 7px 0px rgba(252, 172, 56, 0.44);
                border-radius: 5px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .btnb{
                width: 41px;
                height: 21px;
                border: 1px solid #FCAC38;
                border-radius: 5px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FCAC38;
                margin-left: 16px;
            }
        }
        .express{
            .top{
                padding:15px 0;
                .spa{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    margin-right: 14px;
                }
                .spb{
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
            .bottom{
                width: 100%;
                height: auto;
                .item{
                    width: 33%;
                    height: auto;
                    margin-bottom: 20px;
                    .txt1{
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        margin-bottom: 5px;
                    }
                    .txt2{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                    .price{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #FF5522;
                    }
                }
            }
        }
    }
</style>